// WebCustomElement.jsx
import React from 'react'

class WebCustomElement extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
  }

  connectedCallback() {
    this.render()
  }

  render() {
    const content = this.innerHTML || 'Web Component Content'
    this.shadowRoot!.innerHTML = `
      <div style="border: 2px solid #3498db; border-radius: 8px; padding: 16px; margin: 16px 0; background-color: #f8f9fa;">
        <h3 style="margin-top: 0; color: #2c3e50;">Web Component</h3>
        <p style="color: #34495e;">${content}</p>
        <slot></slot>
      </div>
    `
  }
}

// 定义 Web Component
if (!customElements.get('web-custom-element')) {
  customElements.define('web-custom-element', WebCustomElement)
}

// 导出 React 组件包装器（可选）
export const WebCustomElementComponent = ({ children }: any) => {
  return <web-custom-element>{children}</web-custom-element>
}

export { WebCustomElement }
